<#include "../../common/meta.ftl">
		<script type="text/javascript" src="${ctx.contextPath}/coms/m97Date/WdatePicker.js"></script>
		<script type="text/javascript" src = "http://api.map.baidu.com/api?v=1.4"></script>
		<style>
			#map{
				left: 5px;
				width: 100%;
				height: 90%;
			}
			
			#mainDiv{
				display: none;
				position: absolute;
				z-index: 9998;
				top: 0px;
				left: 5px;
				width: 100%;
				height: 650px;
				filter:alpha(opacity=95); /*IE滤镜，透明度80%*/
				-moz-opacity:0.95; /*Firefox私有，透明度80%*/
				opacity:0.95;/*其他，透明度80%*/
				background: -moz-linear-gradient(top, #fcfcff, #dcdcff); /* Firefox */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fcfcff), color-stop(1, #dcdcff)); /* Saf4+, Chrome */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcff', endColorstr='#dcdcff', GradientType='0'); /* IE*/
			}
			
			#usersDiv{
				margin: 100px auto;
				width:50%;
				background: #fff;
				border-left: 1px solid #888;
				border-right: 1px solid #888;
			}
			
			#usersDiv li{
				height:27px;
				float: left;
				list-style: none;
			}
			
			.title{
				padding: 5px 0 0 5px;
				font-size: 15px;
				font-weight: bolder;
				color: #fff;
			}
			
			#selUser{
				width:100%; 
				height: 200px;
				background: #fcfcfc; 
				padding: 5px 0;
				overflow: auto;
			}
			
			.user{
				width: 65px;
				font-weight: bolder;
				color: #115;
				margin: 8px;
			}
			
			.user input{
				vertical-align: middle;
				margin: 3px;
			}
			#tools_box {
			position: absolute;
			z-index: 9997;
			text-align: left;
			}
			.toolBox {
			background: #FFF;
			left: 0;
			top: 23px;
			width: 71px;
			border: #C3C3C2 solid 1px;
			}
			.toolBtn--img {
			line-height: 23px;
			}
			.toolBtn {
			font-family: arial;
			text-align: center;
			cursor: pointer;
			color: #333;
			line-height: 22px;
			}
			.toolBox .toolBox-item {
			position: relative;
			padding-left: 12px;
			display: block;
			height: 22px;
			line-height: 22px;
			text-align: baseline;
			cursor: pointer;
			text-decoration: none;
			color: #333;
			}
			.toolBtn--img--both .toolBtn-cont {
			padding-right: 21px;
			}
			.toolBtn--img .toolBtn-cont {
			padding-left: 21px;
			position: relative;
			}
			.toolBtn .toolBtn-cont {
			padding: 0 6px;
			display: inline-block;
			height: 22px;
			line-height: 23px;
			}
			#tool_tollCon {
			position: relative;
			top: -1px\0;
			}
			.toolBtn {
			font-family: arial;
			text-align: center;
			text-decoration: none;
			cursor: pointer;
			color: #333;
			height: 22px;
			line-height: 22px;
			display: inline-block;
			padding: 1px;
			}
		</style>
		<script type="text/javascript">
			var map;
			var point;
			var users = new Array();
			var isfirst=0;
			var all = '0';
			var toolheight;
			
			function auto_height_map()
			 {
			     var h= document.documentElement.clientHeight-85;
				 var high = document.getElementById("map");
				 high.style.height=h+"px";	
				 toolheight=h-10; 
			 } 
			 
			$(document).ready(function(){
			    auto_height_map();
				if($('#deptId')){
					$('#deptId').combotree({url:'${ctx.contextPath}/rest/dept/combotree/public',method:'get',panelHeight:300,onChange:function(){
						// 待添加方法
						if(isfirst!=0){
							$("#userIds").val("");
							$("#userName").val("");
						}
						isfirst++;
					 }});
					$('#deptId').combotree('setValue',$('#deptVal').val());
					initialize();
				}
				setInterval("getLocateInf()", 2*60*1000); 
			});
			
			function initialize() {
				map = new BMap.Map('map');
				point = new BMap.Point(113.390321,34.794086);
				map.centerAndZoom(point, 14);
				map.addControl(new BMap.ScaleControl()); //比例尺控件
				map.addControl(new BMap.NavigationControl()); //左上缩放控件
			}
			
			function getUser(){
				var deptId = getValue('deptId');
				if(deptId == ''){
					return;
				}
				if(document.getElementById('all').checked){
					all = '1';
				}else{
					all = '0';
				}
				$.getJSON('${ctx.contextPath}/rest/user/jsonStr/public?deptId=' + deptId + '&all=' + all,'',function(resData){
					if(resData.status != "success"){
						if(resData.length > 0){
							users = resData.split(';');
							showUserDiv();
						}else{
							document.getElementById('userName').value='';
						}
					}
				});
			}
			
			function showUserDiv(){
				var htmlStr = ""
				for(var i = 0; i < users.length; i++){
					if($('#userIds').val().indexOf(users[i].split(',')[0]) > -1){
						htmlStr += "<li class='user'>"
							+ "<input type='checkBox' onClick='checkUser(this," + i + ")' value='" + users[i].split(',')[0] + "' checked/>"
							+ users[i].split(',')[1] 
							+ "</li>";
					}else{
						htmlStr += "<li class='user'>"
							+ "<input type='checkBox' onClick='checkUser(this," + i + ")' value='" + users[i].split(',')[0] + "'/>"
							+ users[i].split(',')[1] 
							+ "</li>";
					}
				}
				document.getElementById('mainDiv').style.display='block';
				document.getElementById('selUser').innerHTML=htmlStr;
			}
			
			function checkUser(obj,i){
				if (obj.checked){
					$('#userIds').val( $('#userIds').val() + users[i].split(',')[0] + ',');
					$('#userName').val( $('#userName').val() + users[i].split(',')[1] + ',');
				}else{
					$('#userIds').val($('#userIds').val().replace(users[i].split(',')[0] + ',',''));
					$('#userName').val($('#userName').val().replace(users[i].split(',')[1] + ',',''));
				}
			}
			
			
			function selectAll(){
				for(var i = 0; i < $(".user").length; i++){
					if(!$(".user")[i].firstChild.checked){
						$(".user")[i].firstChild.click();
					}
				}
			}
			
			function selectInvert(){
				for(var i = 0; i < $(".user").length; i++){
					$(".user")[i].firstChild.click();
				}
			}
			
			function closeMainDiv(){
				document.getElementById('mainDiv').style.display='none';
				getLocateInf();
			}
				
			var markers ;
			var infoWindows;
			var a=0;
			function getLocateInf(){
				if($('#userIds').val()!=""){
					map.clearOverlays();
					markers=[];
					infoWindows=[];
					document.getElementById("tools_box").innerHTML="";
					$.getJSON('${ctx.contextPath}/rest/locate/getLocateInf/public?userIds=' + $('#userIds').val(),'',function(resData){
						if(resData.status != "success"){
							if(resData.length > 0){
								var jsonObj = jQuery.parseJSON(resData);
								markers = new Array(jsonObj.length);
								infoWindows = new Array(jsonObj.length);
								for(var i = 0; i< jsonObj.length; i++){
								
									var locatePoint = new BMap.Point(jsonObj[i].longitude, jsonObj[i].latitude);
									markers[i] = new BMap.Marker(locatePoint);
									map.addOverlay(markers[i]);
												
									var info_html = "<table><tr><th align=right width='70px'>定位人：</th><td>"+jsonObj[i].userName+"</td></tr>"
																+"<tr><th align=right>定位时间：</th><td>"+jsonObj[i].locateTime+"</td></tr>"
																+"<tr><th align=right>定位地点：</th><td>"+jsonObj[i].address+"</td></tr></table>";
									infoWindows[i] = new BMap.InfoWindow(info_html); 
									markers[i].addEventListener("mouseover", (
										function(i) {
											return function(){
												this.openInfoWindow(infoWindows[i]);
											};})(i));
									document.getElementById("tools_box").innerHTML=document.getElementById("tools_box").innerHTML+"<span onclick='openShow("+i+")' class='toolBox-item'>"+jsonObj[i].userName+"<span>";
								}
							}
						}
					});
					if(a==0){
						document.getElementById("tools_box").style.maxHeight=toolheight+"px";
					}
					a=1;
				}
			}
			function openShow(i){
				markers[i].openInfoWindow(infoWindows[i]);
			}
			
			function getValue(inpName){
				var name = ''
				var input = document.getElementsByTagName('input');
				for (var i = 0; i < input.length; i++) {
					if(input[i].name==inpName && input[i].value != ''){
						name = input[i].value;
						break;
					}
				}
				return name;
			}
			var abc=0;
			function showChange(){
				if(abc==0){
					document.getElementById("tools_box").style.top="-2000px";
					document.getElementById("tools_box").style.maxHeight="0px";
					abc=1;
				}else{
					document.getElementById("tools_box").style.top="23px";
					document.getElementById("tools_box").style.maxHeight=toolheight+"px";
					abc=0;
				}
			}
		</script>
	</head>
	<body>
		<div class="head" style="z-index:9999;">
			<div class="path">考勤定位 &gt; 人员定位</div>
		</div>
		<div class="contents" style="position: absolute; width: 97%; >
			<form id="locate" action="${ctx.contextPath}/rest/locate/checkWork" method="GET" style="height: 32px">
			<!-- 查询 -->
				<table class="tb_1" width="90%">
					<tr>
					    <th>部门：</th>
						<td>
							<select id="deptId" name="deptId" style="width:160px; height: 20px;"/></select>
							<input type="hidden" id="deptVal" value="${deptId!''}"/>
						</td>
						<th>
							<input type="checkBox" id="all" name="all" value="1" <#if all=='1'>checked</#if>/>
						</th>
						<td>包含下级</td>
						<th>姓名：</th>
						<td>
							<input type="button" id="userName" value="" style="width: 200px; height:22px; border:#A4BED4 1px solid; text-align: left;
							background: url(${ctx.contextPath}/images/select_user.png);" onclick="getUser()"/>
							<input type="hidden" id="userIds" value=""/>
						</td>
						
						<td>
						<div class="toolBtn toolBtn--noHover toolBtn--img toolBtn--img--both toolBtn--img--tool" id="tool_tollCon">
						<span class="toolBtn-cont" onclick="showChange();">在线人员</span>
						<div class="toolBox" id="tools_box" style="top: 23px;overflow-y:auto;">
						</div>
						</td>
					</tr>
				</table>				
			</form>
			<!-- 地图 -->
			<div id="map"></div>
			<div id="mainDiv">
				<div id="usersDiv">
					<div style="width:100%; height:27px; border-top: 1px solid #888; background: url(${ctx.contextPath}/images/back_right.png);">
						<li class="title" style="width: 36%; height: 22px; background: url(${ctx.contextPath}/images/back_left.png);">
							选择人员
						</li>
						<li style="width:11px; background: url(${ctx.contextPath}/images/back_cent.png);">
						</li>
						<li style="width:60px; height: 25px; margin:1px; float: right; cursor:pointer;
							background: url(${ctx.contextPath}/images/back_close.png) 0px 25px;" onclick="closeMainDiv()"
							onMouseOver="this.style.background='url(${ctx.contextPath}/images/back_close.png) 0px 0px'"
							onMouseOut="this.style.background='url(${ctx.contextPath}/images/back_close.png) 0px 25px'">
						</li>
					</div>
					<div id="selUser"></div>
					<div style="width:100%; height:27px; border-bottom: 1px solid #888; background: #ccf; text-align: center;">
						<input type="button" style="width:77px; height: 25px; margin-top:1px; cursor:pointer;
							border: #999 1px solid; color:#339; font-size: 14px; font-family: 黑体;
							background: url(${ctx.contextPath}/images/back_ok.png) 0px 23px;" onclick="selectAll()" value="全 选"
							onMouseOver="this.style.background='url(${ctx.contextPath}/images/back_ok.png) 0px 0px'"
							onMouseOut="this.style.background='url(${ctx.contextPath}/images/back_ok.png) 0px 23px'" />
						<input type="button" style="width:77px; height: 25px; margin-top:1px; cursor:pointer;
							border: #999 1px solid; color:#339; font-size: 14px; font-family: 黑体;
							background: url(${ctx.contextPath}/images/back_ok.png) 0px 23px;" onclick="selectInvert()" value="反 选"
							onMouseOver="this.style.background='url(${ctx.contextPath}/images/back_ok.png) 0px 0px'"
							onMouseOut="this.style.background='url(${ctx.contextPath}/images/back_ok.png) 0px 23px'" />
						<input type="button" style="width:77px; height: 25px; margin-top:1px; cursor:pointer;
							border: #999 1px solid; color:#339; font-size: 14px; font-family: 黑体;
							background: url(${ctx.contextPath}/images/back_ok.png) 0px 23px;" onclick="closeMainDiv()" value="确 定"
							onMouseOver="this.style.background='url(${ctx.contextPath}/images/back_ok.png) 0px 0px'"
							onMouseOut="this.style.background='url(${ctx.contextPath}/images/back_ok.png) 0px 23px'" />
					</div>
				</div>
			</div>
		</div> 
	</body>
</html>
